<template>
  <div style="display: flex">
    <div id="piemainbox">
      <div><span>温控节点</span></div>
      <div id="piemain"></div>
    </div>
    <div id="mapAPI">
      <span>沈阳城市地图</span>
      <div><BaiduMap /></div>
    </div>
    <div id="linemainbox">
      <span>电流节点数据</span>
      <div id="linemain"></div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref, watchEffect } from "vue";
import * as echarts from "echarts";
import BaiduMap from './view/baiduMap.vue';
//建立webstock连接
const ws = new WebSocket("ws://localhost:4005");
//折线图数据
let brokendata = ref<number>();
//饼状图温度数据
const piechart = ref<number>();
/**
 * 在与服务端建立连接时的处理事件
 */
ws.addEventListener("open", function (event) {
  console.log("WebSocket 连接成功");
  //发送一条消息
  ws.send("hello,server!");
});
/**
 * 在收到服务器消息时处理事件
 * @param event 服务端的值
 */
ws.onmessage = function (event) {
  console.log("收到消息", event.data);
  let data = JSON.parse(event.data);
  if (data.type === "LINE_CHART") {
    //后端传的消息标识符为LINE_CHART
    brokendata.value = data.value;
    console.log("折线图的数据为：" + brokendata.value);
  } else if (data.type === "PIE_CHART") {
    //后端传的消息标识符为PIE_CHART
    piechart.value = data.value;
    console.log("饼状图的数据为:" + piechart.value);
  } else if (data.type === "MESSAGE") {
    //后端传的消息标识符为MESSAGE
    console.log(data.value);
  }
};
/**
 * 在与服务端连接关闭时的事件
 */
ws.addEventListener("close", function (event) {
  console.log("WebSocket 连接关闭");
});
/**
 * 在与服务端连接出错时的事件
 */
ws.addEventListener("error", function (event) {
  console.error("WebSocket 连接出错", event);
});
onMounted(() => {
  // 初始化echarts实例
  let chart = echarts.init(document.getElementById("piemain") as HTMLElement); //饼状图
  let myChart1 = echarts.init(
    document.getElementById("linemain") as HTMLElement
  ); //折线图
  /**
   * 饼状图的配置项和数据
   */
  let option = {
    tooltip: {
      trigger: "item", //悬停显示数据
    },
    legend: {
      top: "5%",
      left: "center",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 20,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          //定义两个数据对象用于百分比显示颜色
          {
            value: 100,
            name: "Search Engine",
            itemStyle: { color: "#8FBC8F" },
            label: {
              color: "#FFFFFF",
            },
          },
          {
            value: 0,
            name: "Other",
            itemStyle: { color: "#ccc" },
            label: {
              color: "#FFFFFF",
            },
          },
        ],
      },
    ],
  };
  /**
   * 定义监听器
   */
  watchEffect(() => {
    const dataValue = Math.min(Math.max(piechart.value, 0), 100); //将piechart的值限制在0-100之间
    const otherValue = 100 - dataValue; //otherValue的值
    //根据不同数值改变温度颜色
    let color = "#8FBC8F";
    if (dataValue >= 80) {
      color = "#FF0000"; // 红色
    } else if (dataValue >= 60) {
      color = "#FFFF00"; // 黄色
    }
    option.series[0].data[0].value = dataValue;
    option.series[0].data[0].itemStyle.color = color;
    option.series[0].data[1].value = otherValue;
    chart.setOption(option); //将更新后的配置项应用到图表中
  });

  /**
   * 折线图的配置项和数据
   */
  const option1 = {
    xAxis: {
      //配置折线图的x轴
      type: "time",
      //生成了一个长度为10的数组，并显示时间轴上的数据序列
      data: Array.from({ length: 10 }, (v, k) => {
        const now = new Date();
        return new Date(now.getTime() - (10 - k) * 1000).getTime();
      }),
    },
    yAxis: {
      type: "value",
      name: "Income",
      max: 10, //固定y轴最大值为10
      min: 0, //固定y轴最小值为0
    },
    series: [
      {
        type: "line",
        data: [],
        itemStyle: {
          opacity: 0.5,
        },
        animation: false, //是否开启折线图动画
        smooth: true, //是否开启折线图平滑
      },
    ],
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart1.setOption(option1);

  //生成随机数组
  const data = [];
  //定义一个函数用来更新折线图的数据和时间戳，并将其转换为以秒为单位的时间戳
  const updateLineChart = () => {
    //生成一个新的随机数
    const randomNum = brokendata.value;
    //将新的随机数和时间戳添加到数据数组中
    const timestamp = new Date().getTime();
    data.push([timestamp, randomNum]);
    //如果数据数组长度超过10，就删除最旧的数据
    if (data.length > 10) {
      data.shift();
    }
    //计算最旧的数据点的时间戳，并将其转换为以秒为单位的时间戳
    const oldestTimestamp = data[0][0];
    const newestTimestamp = data[data.length - 1][0];
    //将最新的数据和时间范围更新到折线图配置中
    myChart1.setOption({
      xAxis: {
        data: Array.from({ length: 10 }, (v, k) => {
          const now = new Date();
          return new Date(now.getTime() - (10 - k) * 1000).getTime();
        }),
      },
      series: [
        {
          data: data,
        },
      ],
      dataZoom: [
        {
          type: "inside",
          starValue: oldestTimestamp,
          endValue: newestTimestamp,
        },
      ],
    });
  };
  //使用watchEffect 实时更新折线图的数据
  watchEffect(() => {
    updateLineChart();
  });
});
</script>

<style>
@import url(./assets/css/app.css);
</style>